<!--
 * @Description: 新建、编辑静态NAT
 * @Author: 0001100986/LiuShuai
 * @Date: 2021-08-05 11:01:39
 * @LastEditTime: 2021-11-11 16:31:00
 * @LastEditors: 0001100986/LiuShuai
-->
<template>
  <el-dialog
    :title="dialogTitle"
    :close-on-click-modal="false"
    width="500px"
    :visible.sync="dialogStatus"
    @close="cancel"
  >
    <el-form ref="ruleForm" :model="form" :rules="rules" label-width="100px" label-position="right">
      <!-- 名称 -->
      <el-form-item label="NAT名称" prop="natName">
        <el-input v-model="form.natName" maxlength="100"></el-input>
      </el-form-item>
      <!-- 端口选择 -->
      <el-form-item label="端口选择" prop="selectPort">
        <el-select v-model="form.selectPort" style="width:100%;">
          <el-option
            v-for="(item, index) in ne.extAttrs.site.wans"
            :key="index"
            :value="item.name"
            :label="item.name.toUpperCase()"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- NAT前地址 -->
      <el-form-item label="NAT前地址" prop="frontAddress">
        <el-input v-model="form.frontAddress" placeholder="IP地址" />
      </el-form-item>
      <!-- NAT后地址 -->
      <el-form-item label="NAT后地址" prop="afterAddress">
        <el-input v-model="form.afterAddress" placeholder="IP地址" />
      </el-form-item>
      <!-- 转换类型 -->
      <el-form-item label="转换类型" prop="natPoolType">
        <el-select v-model="form.natPoolType" style="width:100%;">
          <el-option value="NAT" label="NAT"></el-option>
          <el-option value="PAT" label="PAT"></el-option>
        </el-select>
      </el-form-item>
      <template v-if="form.natPoolType === 'PAT'">
        <!-- 协议类型 -->
        <el-form-item
          label="协议"
          prop="protocolType"
          :rules="[{ required: true, message: '请选择协议类型', trigger: 'change'}]"
        >
          <el-select v-model="form.protocolType" style="width:100%;">
            <el-option value="TCP" label="TCP"></el-option>
            <el-option value="UDP" label="UDP"></el-option>
          </el-select>
        </el-form-item>
        <!-- NAT前端口 -->
        <el-form-item
          label="NAT前端口"
          prop="frontPort"
          :rules="[
          { required: true, message: '请输入端口值', trigger: 'blur'},
          {  min: 1, max: 65535, type: 'number', message: '范围：1-65535'}
        ]"
        >
          <el-input v-model.number="form.frontPort" placeholder="端口" />
        </el-form-item>
        <!-- NAT后端口 -->
        <el-form-item
          label="NAT后端口"
          prop="afterPort"
          :rules="[
            { required: true, message: '请输入端口值', trigger: 'blur'},
            {  min: 1, max: 65535, type: 'number', message: '范围：1-65535'}
          ]"
        >
          <el-input v-model.number="form.afterPort" placeholder="端口" />
        </el-form-item>
      </template>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="onSubmit">确认</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: ['ne', 'type', 'dialogStatus', 'data'],
  data () {
    return {
      dialogTitle: '',
      form: {
        natName: null,
        selectPort: null,
        frontAddress: null,
        afterAddress: null,
        natPoolType: null,
        protocolType: null,
        frontPort: null,
        afterPort: null
      },
      rules: {
        natName: [{
          required: true,
          message: '请填写NAT名称',
          trigger: 'blur'
        }],
        selectPort: [{
          required: true,
          message: '请选择端口',
          trigger: 'change'
        }],
        frontAddress: [{
          required: true,
          message: '请填写NAT前地址',
          trigger: 'blur'
        }],
        afterAddress: [{
          required: true,
          message: '请填写NAT后地址',
          trigger: 'blur'
        }],
        natPoolType: [{
          required: true,
          message: '请选择转换类型',
          trigger: 'change'
        }]
      }
    };
  },
  watch: {
    type: {
      immediate: true,
      handler (val) {
        let _this = this;
        if (val === 'create') {
          _this.dialogTitle = '新建静态NAT';
          _this.form = {
            natName: null,
            selectPort: null,
            frontAddress: null,
            afterAddress: null,
            natPoolType: null,
            protocolType: null,
            frontPort: null,
            afterPort: null
          };
        }
      }
    },
    'form.natPoolType': {
      handler (val) {
        if (val === 'NAT') {
          this.form.protocolType = null;
          this.form.frontPort = null;
          this.form.frontPort = null;
        }
      }
    }
  },
  methods: {
    // 取消
    cancel () {
      let _this = this;
      _this.$emit('handleDialog', false);
      _this.$refs['ruleForm'].resetFields();
    },
    // 确认
    onSubmit () {
      let _this = this;
      _this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          let params = {
            neId: _this.ne.id,
            siteId: _this.ne.extAttrs.siteId,
            dgId: _this.$store.state.user.user.info.dgId,
            natName: _this.form.natName,
            selectPort: _this.form.selectPort,
            frontAddress: _this.form.frontAddress,
            afterAddress: _this.form.afterAddress,
            natPoolType: _this.form.natPoolType,
            protocolType: _this.form.protocolType,
            frontPort: _this.form.frontPort,
            afterPort: _this.form.afterPort
          };
          if (_this.type === 'create') {
            _this.$http.post({
              url: '/api/sdwan/snatpop/create',
              data: params
            }).then(res => {
              let { status } = res;
              if (status === '0') {
                _this.$message.success('创建成功！');
                _this.$parent.reset();
                _this.cancel();
              }
            });
          }
        } else {
          _this.$message.error('请检查必填项！');
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.ip-mask {
  width: 100%;
  ::v-deep .el-input {
    float: left;
  }
  ::v-deep .el-input:first-child {
    width: 75%;
  }
  label {
    display: block;
    width: 5%;
    float: left;
    text-align: center;
  }
  ::v-deep .el-input:last-child {
    width: 20%;
    &::after {
      content: "";
      overflow: hidden;
      clear: both;
    }
  }
}
.ip-port-mask {
  width: 100%;
  ::v-deep .el-input {
    float: left;
  }
  ::v-deep .el-input:first-child {
    width: 37%;
  }
  label {
    display: block;
    width: 5%;
    float: left;
    text-align: center;
  }
  ::v-deep .el-input {
    width: 16%;
  }
  ::v-deep .el-input:last-child {
    width: 16%;
    &::after {
      content: "";
      overflow: hidden;
      clear: both;
    }
  }
}
</style>